<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8" />
<title>Length Data Types and Units index</title>
<meta name="Description" content="CSS取值与单位: CSS长度值与单位" />
<meta name="Keywords" content="CSS取值与单位, Length Units, Length Data Types, length, em, ex, px, rem, vw, vh, vmin, vmax, cm, mm, q, in, pt, pc" />
<meta name="author" content="Joy Du(飘零雾雨), dooyoe@gmail.com, www.doyoe.com" />
<meta name="robots" content="all" />
<!--[if lte IE 8]>
<script src="../../js/html5.js"></script>
<![endif]-->
<link rel="stylesheet" href="../../skin/article.css" />
</head>
<body>
<nav id="guide" class="g-mod">
	<div class="from">
		<a href="http://css.doyoe.com/" target="_blank">CSS3参考手册</a>
		<span>&#187;</span>
		<a href="../index.htm">取值与单位列表</a>
		<span>&#187;</span>
		<span id="category" rel="values/length" name="index">长度值与单位</span>
	</div>
	<div class="to">
		<span class="label">相关内容：</span>
		<div class="g-combobox g-transition">
			<a href="?" class="g-transition target">
				<strong>长度值与单位参考</strong>
				<span>选择其它项<!--[if lte IE 7]><ins>IE7 and earlier, Get to die</ins><![endif]--></span>
			</a>
			<div class="g-transition list">
				<ul>
					<!-- 插入分类快速导航 -->
				</ul>
			</div>
		</div>
	</div>
</nav>
<header id="hd">
	<section id="title" class="g-mod">
		<h1 class="tit">CSS Length Data Types and Units</h1>
		<ul class="info">
			<li>CSS长度值与单位</li>
		</ul>
		<!-- 插入浏览器信息 -->
	</section>
</header>
<section id="bd">
	<section id="length-values" class="g-mod g-attr">
		<h2 class="tit">长度取值 Length Data Types</h2>
		<div class="cont">
			<table class="g-data">
				<thead>
					<tr>
						<th>长度取值</th>
						<th>版本</th>
						<th>描述</th>
					</tr>
				</thead>
				<tbody>
					<tr>
						<td><a href="length.htm">&lt;length&gt;</a></td>
						<td>CSS2</td>
						<td><a href="../numeric/number.htm">&lt;number&gt;</a>接<a href="#length-units">长度单位</a>。</td>
					</tr>
				</tbody>
			</table>
		</div>
	</section>
	<section id="length-units" class="g-mod g-attr">
		<h2 class="tit">长度单位 Length Units</h2>
		<div class="cont">
			<table class="g-data">
				<thead>
					<tr>
						<th>长度单位</th>
						<th>版本</th>
						<th>描述</th>
					</tr>
				</thead>
				<tbody>
					<tr>
						<th colspan="3">文本相对长度单位  Font-relative Length Units</th>
					</tr>
					<tr>
						<td><a href="em.htm">em</a></td>
						<td>CSS1</td>
						<td>相对于当前对象内文本的字体尺寸</td>
					</tr>
					<tr>
						<td><a href="ex.htm">ex</a></td>
						<td>CSS1</td>
						<td>相对于字符“x”的高度。通常为字体高度的一半</td>
					</tr>
					<tr>
						<td><a href="ch.htm" class="g-color-css3-new">ch</a></td>
						<td>CSS3</td>
						<td>数字“0”的宽度</td>
					</tr>
					<tr>
						<td><a href="rem.htm" class="g-color-css3-new">rem</a></td>
						<td>CSS3</td>
						<td>相对于根元素(即html元素)<a href="../../properties/font/font-size.htm">font-size</a>计算值的倍数</td>
					</tr>
					<tr>
						<th colspan="3">视口相对长度单位  Viewport-relative Length Units</th>
					</tr>
					<tr>
						<td><a href="vw.htm" class="g-color-css3-new">vw</a></td>
						<td>CSS3</td>
						<td>相对于视口的宽度。视口被均分为100单位的vw</td>
					</tr>
					<tr>
						<td><a href="vh.htm" class="g-color-css3-new">vh</a></td>
						<td>CSS3</td>
						<td>相对于视口的高度。视口被均分为100单位的vh</td>
					</tr>
					<tr>
						<td><a href="vmax.htm" class="g-color-css3-new">vmax</a></td>
						<td>CSS3</td>
						<td>相对于视口的宽度或高度，总是相对于大的那个。视口的宽度或高度被均分为100单位的vmax</td>
					</tr>
					<tr>
						<td><a href="vmin.htm" class="g-color-css3-new">vmin</a></td>
						<td>CSS3</td>
						<td>相对于视口的宽度或高度，总是相对于小的那个。视口的宽度或高度被均分为100单位的vmin</td>
					</tr>
					<tr>
						<th colspan="3">绝对长度单位  Absolute Length Units</th>
					</tr>
					<tr>
						<td><a href="cm.htm">cm</a></td>
						<td>CSS1</td>
						<td>厘米</td>
					</tr>
					<tr>
						<td><a href="mm.htm">mm</a></td>
						<td>CSS1</td>
						<td>毫米</td>
					</tr>
					<tr>
						<td><a href="q.htm">q</a></td>
						<td>CSS3</td>
						<td>1/4毫米（quarter-millimeters）; 1q = 0.25mm</td>
					</tr>
					<tr>
						<td><a href="in.htm">in</a></td>
						<td>CSS1</td>
						<td>英寸（inches）; 1in = 2.54cm</td>
					</tr>
					<tr>
						<td><a href="pt.htm">pt</a></td>
						<td>CSS1</td>
						<td>点（points）; 1pt = 1/72in</td>
					</tr>
					<tr>
						<td><a href="pc.htm">pc</a></td>
						<td>CSS1</td>
						<td>派卡（picas）; 1pc = 12pt</td>
					</tr>
					<tr>
						<td><a href="px.htm">px</a></td>
						<td>CSS1</td>
						<td>像素（pixels）; 1px = 1/96in</td>
					</tr>
				</tbody>
			</table>
		</div>
		<div class="related">
			<p class="g-color-light"><strong class="g-color-css3-change">紫色</strong> 链接表示该属性在CSS3有修改或者增加了新的属性值；<strong class="g-color-css3-new">橙色</strong> 链接表示该属性是CSS3新增属性</p>
		</div>
	</section>
</section>
<footer id="ft">
	<aside id="rights" class="g-mod">
		<!-- 插入浏览器及版权信息 -->
	</aside>
</footer>
<script src="../../js/jquery.js"></script>
<script src="../../js/inner.js"></script>
</body>
</html>